const {
    resolve
} = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const webpack = require('webpack')
// process.env.NODE_ENV = 'development'

module.exports = {
    // 入口
    entry: "./src/js/index-pro.js",
    // 多入口
    // entry: {
    //     indexPro: "./src/js/index-pro.js",
    //     indexProTest: "./src/js/index-pro-test.js"
    // },
    // 第三方库打包
    // entry: {
    //     axios: ['axios']
    // },
    // 输出
    output: {
        // 输出文件名
        filename: "[name].[contenthash:10].js",
        // 路径
        path: resolve(__dirname, "build"),

        // dll 打包
        // filename: '[name].js',
        // path: resolve(__dirname, 'dll'),
        // library: '[name]_[hash]'
    },
    module: {
        rules: [{
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // 从下到上进行执行
                    // "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    // {
                    //     loader: 'postcss-loader',
                    //     options: {
                    //         ident: 'postcss',
                    //         plugins: () => [
                    //             // postcss 的插件
                    //             require('postcss-preset-env')()
                    //         ]
                    //     }
                    // }
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    ["postcss-preset-env", {}]
                                ],
                            },
                        },
                    },
                ],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    // 开启多进程打包
                    'thread-loader',
                    {
                        loader: "babel-loader",
                        // options: {
                        //     // 预设：指示 babel 做怎么样的兼容性处理
                        //     presets: ['@babel/preset-env']
                        // }
                        options: {
                            // 预设：指示 babel 做怎么样的兼容性处理
                            presets: [
                                [
                                    "@babel/preset-env",
                                    {
                                        // 按需加载
                                        useBuiltIns: "usage",
                                        // 指定 core-js 版本
                                        corejs: {
                                            version: 3,
                                        },
                                        // 指定兼容性做到哪个版本浏览器
                                        targets: {
                                            chrome: "60",
                                            firefox: "60",
                                            ie: "9",
                                            safari: "10",
                                            edge: "17",
                                        },
                                    },
                                ],
                            ],
                            cacheDirectory: true
                        },
                    }
                ]
            },
            //  {
            //   test: /\.js$/,
            //   exclude: /node_modules/,
            //   loader: 'eslint-loader',
            //   options: {
            //     // 自动修复 eslint 的错误
            //     fix: true,
            //   },
            // }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/html/index-pro.html",
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        }),
        // new MiniCssExtractPlugin()
        new MiniCssExtractPlugin({
            filename: "css/built.[contenthash:10].css",
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new WorkboxWebpackPlugin.GenerateSW({
            clientsClaim: true,
            skipWaiting: true
        }),
        // 打包生成一个映射关系
        new webpack.DllPlugin({
            name: '[name]_[hash]',
            path: resolve(__dirname, 'dll/mainifest.json'),
        }),
        new AddAssetHtmlWebpackPlugin({
            filepath: resolve(__dirname, 'dll/axios.js')
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    // mode: "development",
    mode: 'production',
    externals: {
        // 拒绝 axios 被打包进来 
        axios: 'axios'
    }
};